<template>
	<div class="zy-content">
		<PageOee subTitle="模具维修看板" @orgChange="orgChange">
			<div style="display: flex !important; height: 100%; flex-direction: column">
				<div style="display: flex; gap: 10px; flex: 1">
					<Widget :header="false" style="flex: 1; display: flex; justify-content: center; align-items: center">
						<div class="card">
							<img src="./images/u.png" />
							<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center">
								<div class="info1">模具维修单待分配</div>
								<div class="info2">
									{{ digitalization(dataArr, 'waitDistribution', 0) }}
									<div class="unit">(件)</div>
								</div>
							</div>
						</div>
					</Widget>
					<Widget :header="false" style="flex: 1; display: flex; justify-content: center; align-items: center">
						<div class="card">
							<img src="./images/u.png" />
							<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center">
								<div class="info1">模具维修单维修中</div>
								<div class="info2">
									{{ digitalization(dataArr, 'repairing', 0) }}
									<div class="unit">(件)</div>
								</div>
							</div>
						</div>
					</Widget>
					<Widget :header="false" style="flex: 1; display: flex; justify-content: center; align-items: center">
						<div class="card">
							<img src="./images/u.png" />
							<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center">
								<div class="info1">模具维修单升级中</div>
								<div class="info2">
									{{ digitalization(dataArr, 'upgrade', 0) }}
									<div class="unit">(件)</div>
								</div>
							</div>
						</div>
					</Widget>
					<Widget :header="false" style="flex: 1; display: flex; justify-content: center; align-items: center">
						<div class="card">
							<img src="./images/u.png" />
							<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center">
								<div class="info1">上级合格率</div>
								<div class="info2">
									{{ digitalization(dataArr, 'passRate', 2, 100) }}
									<div class="unit">(%)</div>
								</div>
							</div>
						</div>
					</Widget>
					<Widget :header="false" style="flex: 1; display: flex; justify-content: center; align-items: center">
						<div class="card">
							<img src="./images/u.png" />
							<div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center">
								<div class="info1">故障停机率</div>
								<div class="info2">
									{{ digitalization(dataArr, 'outageRate', 2, 100) }}
									<div class="unit">(%)</div>
								</div>
							</div>
						</div>
					</Widget>
				</div>
				<div style="margin-top: 10px; flex: 8">
					<Widget title="模具维修工单列表" style="height: 100%">
						<template #title-toolbar>
							<Tags>
								<Tag type="out" color="#f07577">模具升级中</Tag>
								<Tag type="out" color="#f0973f">模具待分配</Tag>
								<Tag type="out" color="#3374f6">模具维修中</Tag>
							</Tags>
						</template>
						<div style="flex: 1; display: flex">
							<transition>
								<div style="flex: 1; display: flex; flex-wrap: wrap; margin: 10px; gap: 1%; row-gap: 10px" v-if="!pageLoading">
									<card-style-4
										v-for="(item, index) in dataArr.info.records"
										:key="index"
										:info1="item.moldCode"
										:info2="item.manufacturingProcess"
										:info3="item.maintenanceStatus"
										:info4="item.maintenanceStatusStr"
										:info5="item.responseTime"
										:info6="item.handleTime"
										:info7="item.repairOrderNo"
										:info8="item.repairApplicant"
										:info9="item.createTime"
									/>
								</div>
							</transition>
						</div>
					</Widget>
					<div class="pageWrap mt16" v-show="!isFull">
						<pageLeftTitle :total="total" />
						<Page
							:total="total"
							:page-size="pageSize"
							:page-size-opts="isFull ? pageSizeOption1 : pageSizeOption"
							:current="pageNum"
							@on-change="changePageNum"
							@on-page-size-change="changePageSize"
							show-sizer
							show-total
						/>
					</div>
				</div>
			</div>
		</PageOee>
	</div>
</template>

<script>
import PageOee from '@/components/dataBoard/layout/page/index.vue';
import Widget from '@/components/dataBoard/components/widget/index.vue';
import Tags from '@/components/dataBoard/components/tags/index.vue';
import Tag from '@/components/dataBoard/components/tag/index.vue';
import CardStyle4 from './components/card-style4.vue';

export default {
	name: 'oeeBoard4',
	components: {
		PageOee,
		Widget,
		Tags,
		Tag,
		CardStyle4,
	},
	data() {
		return {
			dataArr: {},
			workShop: null,
			interval: null,
			pageSize: 16,
			pageNum: 1,
			total: 1,
			myInterval: null,
			pageSizeOption: [16, 32, 48, 64],
			pageLoading: false,
		};
	},
	watch: {
		isFull() {
			if (this.isFull) {
				this.pageNum = 1;
				this.pageSize = 15;
				this.myInterval = setInterval(() => {
					if (this.total > this.pageSize * this.pageNum) {
						this.pageNum += 1;
					} else this.pageNum = 1;
					this.getWorkProductionStatisticsPage();
				}, 30000);
			} else {
				this.pageNum = 1;
				this.pageSize = 8;
				clearInterval(this.myInterval);
			}
			this.searchList();
		},
	},
	computed: {
		isFull() {
			return this.$store.state.fullScreenState;
		},
	},
	methods: {
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		digitalization(model, attr, num = 0, rate = 1) {
			if (model) {
				const value = model[attr];
				if (value === undefined) {
					return '--';
				} else if (value === null) {
					return '--';
				} else if (value === 0) {
					return 0;
				}
				return parseFloat(value) * rate.toFixed(num);
			} else {
				return '--';
			}
		},
		// 车间改变获取车间code
		orgChange(val) {
			this.workShop = val;
			this.searchList();
		},
		searchList() {
			this.pageLoading = true;
			// console.log('查询', new Date());
			// if (!this.workShop) return;
			// 模拟请求数据
			this.axios({
				url: '/dms/oee-board/moldRepairBoard',
				methods: 'get',
				params: {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
					workShop: this.workShop,
				},
			}).then((res) => {
				this.pageLoading = false;

				if (res.code == 200 && res.data) {
					this.dataArr = res.data;
					this.total = res.data.info.total;
				} else {
					this.dataArr = [];
					this.total = 0;
				}
			});
		},
	},
	mounted() {
		this.searchList();
		this.interval = setInterval(this.searchList, 1000 * 30);
	},
	destroyed() {
		clearInterval(this.interval);
	},
};
</script>

<style scoped lang="scss">
.card {
	display: flex;
	padding: 10px 0;
	.info1 {
		font-size: 12px;
		color: #999;
	}
	.info2 {
		font-size: 24px;
		display: flex;
		align-items: center;
		.unit {
			font-size: 12px;
			margin-left: 7px;
		}
	}
}
.v-enter {
	transform: translateX(200%);
	opacity: 0;
	transition: all 0.6s;
}
.v-enter-to {
	transition: all 0.6s;

	opacity: 1;
}
</style>
